<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form
          v-show="currentTab === 'field'"
          size="small"
          label-width="90px"
        >
          <el-form-item
            v-if="configData.layerName !== undefined"
            label="图层名称"
          >
            <el-input
              v-model="configData.layerName"
              placeholder="请输入图层名称"
            />
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.context !== undefined"
            label="label内容"
          >
            <el-input
              v-model="configData.chartOption.context"
              placeholder="请输入label内容"
            />
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.fontSize !== undefined"
            label="label字号"
          >
            <el-slider
              v-model="configData.chartOption.fontSize"
              :min="1"
              :max="200"
              :step="1"
              show-input
            ></el-slider>
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.fontFamily !== undefined"
            label="label字体"
          >
            <el-select
              v-model="configData.chartOption.fontFamily"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in fontFamilys"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.fontColor !== undefined"
            label="label字体颜色"
          >
            <el-color-picker
              v-model="configData.chartOption.fontColor"
              show-alpha
            ></el-color-picker>
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.fontWeight !== undefined"
            label="文字粗细"
          >
            <el-select
              v-model="configData.chartOption.fontWeight"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in fontWeights"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.name !== undefined"
            label="name属性值"
          >
            <el-input
              v-model="configData.chartOption.name"
              placeholder="请输入name属性值"
            />
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.width !== undefined"
            label="宽度"
          >
            <el-slider
              v-model="configData.chartOption.width"
              :min="1"
              :max="500"
              :step="1"
              show-input
            ></el-slider>
          </el-form-item>

          <el-form-item label="绑定组件">
            <el-select
              v-model="configData.chartOption.bindList"
              multiple
              filterable
              placeholder="请选择"
              @change="bindCharts"
            >
              <el-option
                v-for="item in chartList"
                :key="item.customId"
                :label="item.layerName"
                :value="item.customId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="configData.chartOption.animate !== undefined"
            label="载入动画"
          >
            <el-select
              v-model="configData.chartOption.animate"
              placeholder="请选择"
            >
              <el-option
                v-for="item in animateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="数据源类型">
            <el-select v-model="configData.chartOption.dataSourceType" placeholder="请选择">
                <el-option
                  v-for="item in dataSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

        <Databasewebsocket v-show="configData.chartOption.dataSourceType === 'websocket'" 
          :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></Databasewebsocket>
          
          <el-form-item v-show="configData.chartOption.dataSourceType === 'static'" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <api-source v-show="configData.chartOption.dataSourceType === 'url'" 
            :interfaceUrl="interfaceUrl" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout"
            @changeApi="changeApi" ></api-source>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件交互 -->
        <el-form
          v-show="currentTab === 'interaction'"
          size="small"
          label-width="90px"
        >
          <!-- 是否开启图表远程控制 -->
          <el-form-item label="是否开启图表远程控制">
            <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>
          <Interactionwebsocket
            v-show="configData.chartOption.isRemote === true"
            :remote="configData.chartOption.remote"
            @getRemote="getRemote"
          ></Interactionwebsocket>

          <el-form-item
            v-show="configData.chartOption.isRemote === true"
            label="*参数说明"
          >
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"
                ><i style="color:#F00;"
                  >cascade_name(name属性值)=选中值</i
                ></span
              >
            </div>
          </el-form-item>
        </el-form>
        <!-- 组件位置 -->
        <el-form
          v-show="currentTab === 'location'"
          size="small"
          label-width="90px"
        >
          <el-form-item label="X位置">
            <el-input-number
              v-model="configData.x"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number
              v-model="configData.y"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number
              v-model="configData.width"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number
              v-model="configData.height"
              controls-position="right"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog> 
  </div>
</template>

<script>
import { animateOptions } from "../../animate/animate";
import citydata from "../../json/citydata.json";
import { getLinkChart } from "../../util/LinkageChart";
import Interactionwebsocket from "./chartDB/Interactionwebsocket";
import { dataSourceOptions, dataBaseOptions } from '../../ComponentsConfig'
import Databasewebsocket from './chartDB/Databasewebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import ApiSource from './chartDB/ApiSource'

export default {
  components: {
    Interactionwebsocket,
    Databasewebsocket,
    DataEditor,
    ApiSource
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      fontFamilys: [
        "宋体",
        "黑体",
        "微软雅黑",
        "Digital",
        "Chunkfive",
        "unidreamLED",
        "Arial",
        "Helvetica",
        "sans-serif"
      ],
      fontWeights: ["normal", "bold", "bolder", "lighter"],
      types: [
        { label: "月范围", value: "monthrange" },
        { label: "日期范围", value: "daterange" },
        { label: "日期时间范围", value: "datetimerange" }
      ],
      currentTab: "field",
      configData: this.costomData,
      chartList: this.drawingList,
      animateOptions,
      dataSourceOptions,
      dataBaseOptions,
      staticDataValue:
        this.costomData != null
          ? this.costomData.chartOption.staticDataValue
          : "123",
      interfaceUrl:
        this.costomData.chartOption.interfaceURL != ""
          ? this.costomData.chartOption.interfaceURL
          : "",
      requestParameters:
        this.costomData.chartOption.requestParameters != ""
          ? this.costomData.chartOption.requestParameters
          : "",
      token:
        this.costomData.chartOption.token != "" &&
        this.costomData.chartOption.token != undefined
          ? this.costomData.chartOption.token
          : "",
      aceKey:Math.random(),
      open:false,
    };
  },
  //页面加载完执行
  mounted() {
    //获取可联动组件列表
    let chartList = getLinkChart(this.drawingList);
    this.chartList = chartList;
  },
  computed: {},
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = newVal.chartOption.staticDataValue;
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
        this.token = newVal.chartOption.token;
      }
    }
  },
  methods: {
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
        //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
        this.$set(
          this.configData.chartOption,
          "staticDataValue",
          this.staticDataValue
        );
      } else {
        //this.configData.interfaceURL = this.staticDataValue;
        this.$set(
          this.configData.chartOption,
          "staticDataValue",
          this.staticDataValue
        );
      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, "interfaceURL", this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(
        this.configData.chartOption,
        "requestParameters",
        this.requestParameters
      );
    },
    changeToken() {
      this.$set(this.configData.chartOption, "token", this.token);
    },
    bindCharts(val) {
      this.$set(this.configData.chartOption, "bindList", val);
    },
    getRemote(val) {
      // console.log(val)
      this.$set(this.configData.chartOption, "remote", val);
    },
    getInterfaceKey(val){
      this.$set(this.configData.chartOption, 'interfaceKey', val);
    },
    changeApi(val){
      if(val.type == "interfaceUrl"){
        this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
      }else if(val.type == "requestParameters"){
        this.$set(this.configData.chartOption, 'requestParameters', val.arr);
      }else if(val.type == "requestMethod"){
        this.$set(this.configData.chartOption, 'requestMethod', val.arr);
      }else if(val.type == "token"){
        this.$set(this.configData.chartOption, 'token', val.arr);
      }else if(val.type == "timeout"){
        this.$set(this.configData.chartOption, 'timeout', val.arr);
      }
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
};
</script>

<style scoped>
/deep/ .center-tabs .el-tabs__item {
  width: 25%;
  text-align: center;
}
</style>
